<!-- 散点图 -->
<style lang="stylus" scoped>
.danweipoint
  height 95%
  width 100%
.main
  height 100%
  width 100%
  transition all 0.5s linear
.main div
 height 100%
</style>

<template lang="html">
<div class="danweipoint">
  <p style='font-family:微软雅黑;font-size:16px;color:#0B903C;font-weight:bold;line-height:50px;'>重点场所、单位</p>
  <div class="main"></div>
</div>
</template>

<script>
import axios from 'axios'
import echarts from 'echarts'
import header from 'components/header/header'
// import filter from 'components/filter/filter'
axios.get('/pingdingshan/vue/static/data/pingdingshan.json').then((res) => {
// axios.get('/static/data/pingdingshan.json').then((res) => {
  echarts.registerMap('pingdingshan', res.data);
})
const USER_NAME = 'elastic'
const PSW = 'elasticl@ethical.cn'
const AUTH_TOKEN = "Basic " + btoa(USER_NAME + ":" + PSW)


export default {
  created() {
    this._getMyChart()
  },
  data() {
    return {
      legendArr: [],
      color: this.$store.state.color,
      myChart: {},
      geoCoordMap: {}
    }
  },
  methods: {
    _init(options) {
      this.myChart = echarts.init(document.querySelector('.danweipoint .main'))
      this.myChart.on("click", function(params) {
        // localStorage.setItem('areaname', params.name);
        // localStorage.setItem('xianname', params.name);
        // console.log("地图点击name：" + params.name);
        // location.href = "/#/index?areaname=" + params.name;
      })
      this.myChart.setOption(options)
      this.legendArr = options.series
      this.legendArr.forEach((data) => {
        data.selected = true;
      })
      this.$root.charts.push(this.myChart)
      window.addEventListener('resize', function() {
        this.myChart.resize()
      }.bind(this))
    },
    _getMyChart() {
      axios.get(this.GLOBAL.BASE_URL + '/a/sys/area/mapData?name=平顶山市').then((res) => {
      // axios.get('static/data/Datas.json').then((res) => {
        if (res) {
          $(res.data).each(function() {
            var arr = this.value.split(",")[9];
            this.value = arr;
          })
          localStorage.setItem('areadata', JSON.stringify(res.data));
          let options = {
            // backgroundColor: '#404a59',
            title: {
              show: true
            },
            tooltip: {
              trigger: 'item',
              formatter: "{b}<br/>{c}个"
            },
            legend: {
              show: true
            },
            visualMap: {
              min: 800,
              max: 50000,
              text: ['High', 'Low'],
              realtime: false,
              calculable: true,
              inRange: {
                color: 'rgba(11, 144, 60, 0)'
              },
              show: false
            },
            series: [{
              name: '平顶山重点人员',
              type: 'map',
              mapType: 'pingdingshan', // 自定义扩展图表类型
              top: 50,
              itemStyle: {
                normal: {
                  color: '#000',
                  opacity: 1,
                  borderColor: '#107C5F',
                  borderWidth: 2,
                  label: {
                    formatter: function (params) {
                      // 假设此轴的 type 为 'time'。
                      return params.name;
                    },
                    show: true,
                    color: '#107C5F',
                    fontWeight: 'bold'
                  }
                }
              },
              data: res.data
            }]
          }
          this._init(options)
        }
      });
    }
  },
  components: {
    'v-header': header
    // 'v-filter': filter
  }
}

</script>
